<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OnlineNote</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/surface.css">
<link rel="stylesheet" href="css/input.css">
</head>
<body id="home">
	<div class="home">
		<div class="container">
			<div id="instruct" class="instruct">
				<div class="col-md-12 text-center">
					<div class="margin-base-vertical">
						<h1 id="title" style="display:none">OnlineNote</h1>
					</div>
					<div class="margin-base-vertical">
						<div id="preview" class="preview" style="display:none">使用 OnlineNote 快速、方便地保存笔记到云端</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 text-center margin-base-vertical">
				<a href="#"  id="start" class="btn btn-lg btn-primary btn-shadow mainly" role="button">开始旅程</a>
			</div>
			
			<div id="registerForm" class="instruct" style="display:none">
				<form name="loginRequest">
					<div class="input">
						<input id="username" class="button-u-p margin-small-vertical" placeholder="User Name " />
						<link async href="css/input.css" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
					</div>
					
					<div class="input">
						<input id="nickname" class="button-u-p margin-small-vertical" placeholder="Nick Name " />
						<link async href="css/input.css" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
					</div>
					
					<div class="input">
						<input type="password" id="password" class="button-u-p margin-small-vertical" placeholder="Password " />
						<link async href="css/input.css" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
					</div>
					
					<div class="input">
						<input type="secquestion" id="password" class="button-u-p margin-small-vertical" placeholder="Security Question " />
						<link async href="css/input.css" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
					</div>
					
					<div class="input">
						<input type="secanwser" id="password" class="button-u-p margin-small-vertical" placeholder="Security Answer " />
						<link async href="css/input.css" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
					</div>
					
					<div class="input">
						<input class="button-enter margin-small-vertical" value="Enter" onclick="login()" />
						<link async href="" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
					</div>
				</form>
			</div>

		</div>
	</div>
	<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(showInstruct(true));

		$(document).ready(function(){
			$("#start").click(function() {
				showInstruct(false);
			});
		});
		
		function showInstruct(bShow) {
			if(bShow) {
				$("#title").fadeIn("slow");
				$("#preview").fadeIn("slow");
			}else {
				$("#start").fadeOut(10);
				$("#instruct").fadeOut(10);
				
				$("#registerForm").fadeIn(1000);
				$(".input").fadeIn(1000);
			}
		}
	</script>
</body>
</html>